<template>
	<hyb-page title="测量记录">
		<template v-slot:top>
			<view
				class="gui-bg-white gui-dark-bg-level-1 gui-padding gui-flex gui-space-between gui-align-items-center">
				<gui-search class="gui-flex1" @inputting="inputting" @clear="search=''"></gui-search>
				<view style="padding: 0 20rpx;border-radius: 30rpx;margin-left: 20rpx;"
					class="gui-bg-red gui-color-white gui-text-small" @tap="query(1)"><text
						class="gui-form-icon gui-icons">&#xe604; </text>查询</view>
			</view>
		</template>
		<template v-slot:body>
			<view style="height: 120rpx;"></view>

			<hyb-empty v-if="list.length == 0"></hyb-empty>

			<view class="gui-padding-small">
				<view class="gui-list-items gui-bg-white gui-padding gui-border-radius-large gui-margin-top-middle"
					v-for="(item,index) in list" :key="index">

					<view class="gui-flex1">
						<view class="gui-text-small gui-color-black">
							测量时间：<text>{{item.up_time}}</text>
						</view>

						<view class="gui-flex gui-align-items-center gui-margin-top">
							<view class="gui-flex1 gui-text-center"
								:class="{'gui-color-red':checkStatus(item.sys,90,140)}">
								<view><text class="gui-bold"
										style="font-size: 50rpx;">{{item.sys}}</text><text>mmHg</text></view>
								<view class="gui-margin-top-small">高压</view>
							</view>

							<view class="gui-flex1 gui-text-center"
								:class="{'gui-color-red':checkStatus(item.dia,60,90)}">
								<view><text class="gui-bold"
										style="font-size: 50rpx;">{{item.dia}}</text><text>mmHg</text></view>
								<view class="gui-margin-top-small">低压</view>
							</view>

							<view class="gui-flex1 gui-text-center"
								:class="{'gui-color-red':checkStatus(item.pul,60,100)}">
								<view><text class="gui-bold"
										style="font-size: 50rpx;">{{item.pul}}</text><text>bpm</text></view>
								<view class="gui-margin-top-small">心率</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

	</hyb-page>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				list: [],
				page: 1,
				last_page: 1,
				search: ""
			}
		},

		computed: {
			base: () => {
				return uni.storage.get("base")
			}
		},

		onReachBottom() {

			if (this.last_page > this.page) {
				this.page++;
				this.query()
			}

		},

		onLoad(options) {

			if (options.id) {
				this.id = options.id;
			}


			this.query();
		},


		methods: {

			checkStatus(val, min, max) {
				if (val >= min && val <= max) {
					return false;
				}
				return true;
			},


			inputting(search) {
				this.search = search;
			},

			query(page) {
				if (page) this.page = page;
				if (this.page == 1) {
					this.list = [];
				}
				uni.gPost("health/record/list", {
					id: this.id,
					page: this.page,
					search: this.search
				}).then((res) => {
					this.last_page = res.last_page;
					this.list = this.list.concat(res.data);
				})
			},

			to(id) {
				uni.navigateTo({
					url: "/health/profile/profile?id=" + id
				})
			}
		}
	}
</script>

<style>
	/* 自定义吸顶元素样式 */
	.js-icon {
		border-radius: 50%;
	}

	.js-status {
		border: 1rpx solid red;
		color: red;

	}
</style>